<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script>
	/*
	// 问题：将所有的数据遍历出来，全部设置为隐藏
	var dom = null,	// 缓存创建的新闻标题元素
		paper = 0,	// 当前页数
		num = 5,	// 每页显示的新闻条数
		i = 0,		// 创建新闻元素时保存的变量
		len = article.lenght;	// 新闻数据长度

	// 循环所有的数据，有问题
	for (; i < len; i++) {
		dom = document.createElement('div');
		dom.innerHTML = article[i];
		// 超出这个数量的全部隐藏
		if (i >= num) {
			dom.style.display = 'none';
		}
		document.getElementById('content').appendChild(dom);
	}

	// 为下一页绑定事件
	document.getElementById('next_page').onclick = function(){
		var div = document.getElementById('container').getElementsByTagName('div'),
		j = k = n = 0;
		// 每页起始的新闻条数
		n = ++paper % Math.ceil(len/num)*num;
		for (; j < len; j++) {
			// 隐藏所有的新闻
			div[j].style.display = 'none';
		}
		for (; k < 5; k++) {
			if (div[n+k]) {
				div[n+k].style.display = 'block';
			}
		}
	}
	*/

	// 享元对象
	var Flyweight = function(){
		// 已经创建的元素
		var created = [];
		// 创建一个新闻包装容器
		function create(){
			var dom = document.createElement('div');
			// 将容器插入新闻列表容器中
			document.getElementById('container').appendChild(dom);
			// 缓存新创建的元素
			created.push(dom);
			// 返回创建的新元素
			return dom;
		}

		return {
			// 获取创建新闻元素方法
			getDiv: function(){
				// 如果已创建的元素小于当前页元素的总个数，则创建
				if (created.length < 5) {
					return create();
				} else {
					// 获取第一个元素，并插入最后面
					var div = created.shift();
					created.push(div);
					return div;
				}
			}
		}
	}

	var paper = 0,
		num = 5,
		len = article.length;

	// 添加5条新闻
	for (var i = 0; i < 5; i++) {
		if (article[i]) {
			// 通过享元类获取创建的元素并写入新闻内容
			Flyweight.getDiv().innerHTML = article[i];
		}
	}

	// 下一页按钮绑定事件
	document.getElementById('next_page').onclick = function(){
		// 如果新闻内容不足5条则返回
		if (article.length < 5) {
			return;
		}

		// 获取当前页第一条新闻的索引
		var n = ++paper * num % len,
			j = 0;

		// 插入5条新闻
		for (; j < 5; j++) {
			if (article[n+j]) {
				// 如果存在第n+j条则插入
				Flyweight.getDiv().innerHTML = article[n+j];
			} else if (article[n+j-len]) {
				// 否则插入起始位置第n+j-len条
				Flyweight.getDiv().innerHTML = article[n+j-len];
			} else {
				// 如果都不存在，则插入空字符串
				Flyweight.getDiv().innerHTML = '';
			}
		}
	}
	</script>
</body>
</html>